<template>
  <div class="event-list flex flex-column">
    <a-radio-group
      v-if="handleStateFilterShow"
      v-model:value="type"
      :options="typeList"
      @change="radioChange"
      option-type="button"
      class="flex-fixed"
      style="margin: 15px 15px 0"
    />
    <antd-form
      v-model="formData"
      :options="formOption"
      @submit="formSubmit"
      :label-col="8"
      :wrapper-col="16"
      style="padding: 15px"
    />
    <common-table
      ref="table"
      :pagination="{ pageSize: 15 }"
      :fetch="getTableDataAsync"
      :fetch-params="apiParams"
      :columns="columns"
      :show-toolbar="false"
      class="flex-auto-height"
    >
      <template #action="{ scope }">
        <a-button type="link" @click="details(scope)">详情</a-button>
        <!-- 投屏菜单没有按钮权限 -->
        <!-- 提及只涉及猛追湾街道 -->
        <!-- 没有提及过的事件 -->
        <a-button v-if="showTjBtn(scope)" type="link" @click="eventTj(scope)">提及</a-button>
      </template>
    </common-table>
  </div>
</template>

<script>
import get from 'lodash-es/get.js';
import { eventList, eventTiji } from '@gis/lib/api';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { handleTableRes, handleFormRes } from '@gis/lib/utils/resolver.js';
import debounce from 'lodash-es/debounce.js';
import isArray from 'lodash-es/isArray.js';
import { openEventDetailsDialog } from './event-opt.js';
import { Modal } from 'ant-design-vue';

export default {
  name: 'event-list',
  props: {
    paramsData: { type: Object },
    handleStateFilterShow: { type: Boolean, default: true }, //状态筛选条件
  },
  data() {
    return {
      formData: {},
      type: '',
      typeList: [
        { label: '所有', value: '' },
        { label: '待处理', value: '1' },
        { label: '处理中', value: '2' },
        { label: '待办结', value: '3' },
        { label: '已办结', value: '4' },
        { label: '无效', value: '5' },
        { label: '已上报', value: '6' },
        { label: '下级处理', value: '0' },
      ],
      columns: [
        {
          title: '类别',
          dataIndex: 'p_type_name',
        },
        {
          title: '类型',
          dataIndex: 'c_type_name',
        },
        {
          title: '上报人',
          dataIndex: 'report_person_name',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 180,
        },
      ],
    };
  },
  mounted() {
    this.type = get(this.paramsData, 'handle_state', '');
    this.pointAreaCode = get(this.paramsData, 'area_code', ''); //指定区域范围的事件
    this.formData = Object.assign({}, this.formData, this.paramsData, {
      occur_time: this.paramsData.occur_time
        ? [this.paramsData.occur_time.split('~')[0], this.paramsData.occur_time.split('~')[1]]
        : null,
    });
    this.$nextTick(() => {
      this.$refs.table.load();
    });
  },
  computed: {
    formOption() {
      return [
        {
          component: 'a-input',
          label: '上报人',
          field: 'report_person_name',
        },
        {
          component: 'a-range-picker',
          label: '事发时间段',
          field: 'occur_time',
          props: {
            showTime: true,
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
          },
        },
      ];
    },
    area_code() {
      const { area_code } = useUserInfoStore();
      return area_code;
    },
    apiParams() {
      return Object.assign({}, this.formData, {
        area_code: this.pointAreaCode ? this.pointAreaCode : this.area_code,
        handle_state: this.type,
      });
    },
  },
  methods: {
    eventTj(data) {
      Modal.confirm({
        title: '提示',
        content: '确认提及该事件？',
        onOk: async () => {
          const { event_id } = data;
          await handleFormRes(
            eventTiji,
            { event_id },
            {
              onOk: () => {
                this.$refs.table.load();
              },
            }
          );
        },
      });
    },
    // 提及按钮是否显示
    showTjBtn(data) {
      // 事件是属于猛追湾街道以下的，并且是街道账号
      const { handle_state, report_area_code, is_tjsjt } = data;
      const { area_code } = useUserInfoStore();
      if (
        is_tjsjt != '1' &&
        report_area_code &&
        report_area_code.indexOf('86.51.01.08.09') >= 0 &&
        area_code == '86.51.01.08.09' &&
        (handle_state == 1 || handle_state == 2 || handle_state == 3)
      ) {
        return true;
      }
      return false;
    },
    formSubmit(val) {
      this.formData = Object.assign({}, this.formData, val);
      this.radioChange();
    },
    radioChange() {
      this.$nextTick(() => {
        this.$refs.table.load();
      });
    },
    async getTableDataAsync(params) {
      if (!params || !params.area_code) return;
      params = Object.assign({}, params, {
        occur_time:
          isArray(params.occur_time) && params.occur_time.length ? params.occur_time.join(' ~ ') : params.occur_time,
      });
      return await handleTableRes(eventList(params));
    },
    details({ event_id }) {
      openEventDetailsDialog(event_id);
    },
  },
};
</script>

<style scoped lang="less">
.event-list {
  width: 100%;
  height: 100%;
}
</style>
